<script lang="tsx" setup>
import { ref, watchEffect } from 'vue';
import { getErrorStack } from '@/service/api/log/operLog';

interface Props {
  currentId: number | string | null;
}
defineOptions({
  name: 'ErrorStack'
});
const loading = ref(false);
const visible = defineModel<boolean>('visible', {
  default: false
});
const props = defineProps<Props>();
const errorStack = ref<string | ''>('');
const fatchErrorStack = async () => {
  loading.value = true;
  const { data, error } = await getErrorStack(props.currentId as number);
  if (!error || error !== null) {
    errorStack.value = data?.data;
  }
  loading.value = false;
};
watchEffect(() => {
  if (props.currentId) {
    fatchErrorStack();
  }
});

function close() {
  visible.value = false;
  errorStack.value = '';
}
</script>

<template>
  <NModal v-model:show="visible" title="堆栈日志" preset="card" class="w-1000px">
    <NScrollbar class="max-h-400px">
      <NSpin :show="loading">
        <div v-if="errorStack === null || errorStack === ''" class="h-400px flex">
          <Empty />
        </div>
        <NCode language="javascript" show-line-numbers :code="errorStack" word-wrap />
      </NSpin>
    </NScrollbar>

    <template #footer>
      <NSpace justify="end" :size="16">
        <NButton @click="close">取消</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style lang="scss" scoped></style>
